<template>
  <div class="studio">
    <StudioHeader class="navbar" />
    <div class="main-content">
      <studio-side-menu
        v-if="knowledgeGraphMode !== 'preview'"
        class="studio-side-menu-box"
        :plugin-list="pluginList"
        @menuChange="goToSubmenu"
      />
      <router-view v-show="isViewShow" class="studio-view" />

      <iframe
        v-for="plugin in pluginList"
        v-show="isPluginVisible(plugin.name)"
        :key="plugin.name"
        :src="plugin.path"
        frameborder="0"
        class="studio-view"
      >
      </iframe>
    </div>

    <div v-if="visualizationMode === 'preview'" class="preview-view">
      <preview-view />
    </div>
    <!-- <div v-if="knowledgeGraphMode === 'preview'" class="preview-view"> -->
    <!-- <knowledge-preview /> -->
    <!-- </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import StudioHeader from '@/components/studio/StudioHeader.vue'
import StudioSideMenu from '@/components/studio/StudioSideMenu.vue'
import ProjectStore, { Project } from '@/store/modules/project'
import VisualizationStore from '@/store/modules/visualization'
// import KGraphStore from '@/store/modules/k-graph'
import PreviewView from '@/views/studio/PreviewView.vue'
// import KnowledgePreview from '@/views/studio/KnowledgePreview.vue'
import Loading from '@/components/loading/loading.vue'
import { queryEnablePlugin } from '@/api/plugin'

interface PluginMenuItem {
  name: string | undefined
  path: string
  icon: string
  isApp?: boolean
}

@Component({
  components: {
    StudioHeader,
    StudioSideMenu,
    PreviewView,
    Loading,
    // KnowledgePreview,
  },
})
export default class StudioView extends Vue {
  private currentRoutePath: string = ''

  private pluginList: PluginMenuItem[] = []

  public async created(): Promise<void> {
    this.loadPluginList()
    await ProjectStore.queryProjectById(this.$route.params.id)
  }

  private get isViewShow() {
    return (
      this.visualizationMode !== 'preview' &&
      // this.knowledgeGraphMode !== 'preview' &&
      !this.isPluginPath()
    )
  }

  mounted() {
    this.initEventBus()
  }

  beforeDestroy() {
    this.destroyEventBus()
  }

  initEventBus() {
    // @ts-ignore
    this.$eventBus.$on('kg-app-view-mode', this.onKgViewchange)
  }

  destroyEventBus() {
    // @ts-ignore
    this.$eventBus.$off('kg-app-view-mode', this.onKgViewchange)
  }

  onKgViewchange(data: string) {
    console.log('test', data)
    this.knowledgeGraphMode = data
  }

  private loadPluginList() {
    const projectId = Number(this.$route.params.id)
    // this.pluginList.push({
    //   path: `http://10.11.32.21:8081/?projectId=${projectId}`,
    //   name: '图分析视图',
    //   icon: 'iconmoxingfenxi',
    // })

    queryEnablePlugin().then((response) => {
      if (response.status === 200 && response.data.result.length > 0) {
        const prefix = `${window.location.protocol}//${window.location.host}`
        response.data.result.forEach((plugin: any) => {
          let path = `${prefix}${plugin.url}/?projectId=${projectId}`
          if (plugin.url.indexOf('/') !== 0) {
            path = `${plugin.url}/?projectId=${projectId}`
          }

          if (this.pluginList.findIndex((ele) => ele.path === path) < 0) {
            this.pluginList.push({
              path,
              name: plugin.name,
              icon: plugin.iconEncode || 'iconmoxingfenxi',
            })
          }
        })
      }
    })
  }

  public isPluginPath() {
    // 当前路径是否为插件路径
    if (this.$route.query.plugin) {
      return true
    }

    return false
  }

  public isPluginVisible(pluginName: string) {
    if (this.isPluginPath()) {
      return this.$route.query.plugin === pluginName
    }

    return false
  }

  public goToSubmenu(route: PluginMenuItem) {
    // 点击的菜单是插件
    if (route.path.includes('http')) {
      this.$router.push({
        path: this.currentRoutePath,
        query: { plugin: route.name },
      })
    } else {
      const reg = /:(\w*)?/
      const regResult = reg.exec(route.path)
      if (regResult !== null) {
        // 替换path中的参数，如项目id
        const [, matchString] = regResult
        const target = this.$route.params[matchString]
        const targetMenuPath = route.path.replace(reg, target)
        this.$router.push(targetMenuPath)
      } else {
        this.$router.push(route.path)
      }
    }
  }

  public get project(): Project | null {
    return ProjectStore.activeProject
  }

  public get visualizationMode(): string {
    return VisualizationStore.visualizationMode
  }

  private knowledgeGraphMode: string = 'edit'

  // public get knowledgeGraphMode(): string {
  //   return KGraphStore.knowledgeGraphMode
  // }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.studio {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  width: 100vw;

  .main-content {
    display: flex;
    height: calc(100vh - @HEADER_HEIGHT);
  }

  // .navbar {
  //   flex: 0 0;
  // }

  .studio-view {
    flex: 1;
    overflow: hidden;
    // flex: 1 1;
  }

  .preview-view {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
}
</style>
